<template>
  <div class="all" @click="handleClick">
    <div class="cell">
      <div class="left">
        <!-- {{leftIcon}} -->
        <img :src="leftIcon" alt srcset class="xhimg">
        <div class="celltxt">{{name}}</div>
      </div>

      <!--  -->
      <div class="cellright">
        <img :src="arrow" alt srcset class="right">
      </div>
    </div>
  </div>
</template>


<script>
// 引入要使用的组件
//import Home from '@/components/HelloWorld'

import imgName from '../../config/imgName';


export default {
  name: "xxx",
  data() {
    return {
      // 数据初始化  init
      //msg:'初始化数据'
      arrow:imgName.arrows.right
    };
  },
  methods: {
    // 所有方法在这里实现
    //clickAction(){
    //我是例子
    //}
    handleClick(){
      console.log(this.name);
      this.$emit('handleClick',this.name)
    }
  },
  mounted() {
    //获取 DOM 节点 == viewDidLoad
  },
  props: {
    //给父类传值
    leftIcon: {
      type: String,
      default: imgName.errorUrl
    },
    name: {
      type: String,
      default: "请替换",
      required: true
    }
  }
};
</script>
<style scoped>
/* 样式处理 */
.all {
  height: 54px;
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5px;
}
.cell {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
}
.xhimg {
 
  margin-left: 10px;
  margin-right: 10px;
  /* background: #000; */
}
img{
 width: 30px;
  height: 30px;
}
.right {
  margin-right: 10px;
}
.left {
  /* width: 80%; */
  display: flex;
  /* background-color: rebeccapurple; */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* align-content: center; */
  /* height: 100% */
}
.celltxt {
  /* height: 100%; */
  /* line-height: 100%; */
  background-color: white;
}
.cellright {
  background-color: white;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>